<template>
	<view class="articles-item" @click="toArticleDetail">
		<u-image class="u-skeleton-fillet" width="100%" height="300rpx" :src="article.img ? vuex_user.store + article.img : null"></u-image>
		<view class="title u-line-1 u-skeleton-rect">{{article.title ? article.title : '文章标题'}}</view>
		<view class="demo-detial">
			{{article.description}}
		</view>
		<view class="demo-tag  u-flex u-row-between">
			<view class="demo-tag-owner">
				点赞量：
				<u-icon name="heart-fill" color="#FFFFFF"></u-icon>
				<text >{{article.like}}</text>
			</view>
			<view class="demo-tag-text">
				阅读量：<text v-model="article.view">{{article.view}}</text>
			</view>
		</view>
		<view class="demo-shop">
			{{article.updatedTime | formatDate}}
		</view>
	</view>
	
</template>

<script>
	export default {
		name:"article-card",
		props:{
			article:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		onLoad(){
			
		},
		methods:{
			
			toArticleDetail(){
				this.article.view++
				this.$u.route({
					url:'/pages/articles/articleShow',
					params:{
						article: this.$u.queryParams(this.article)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.articles-item{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx;
		margin-top: 30rpx;
		box-shadow: 0 12rpx 20rpx 0 rgba(0,0,0, .1);
		.title{
			margin: 10rpx 0;
			font-weight: 500;
			font-size: 32rpx;
			width: 100%;
		}
		.price{
			color: #B50E03;
			width: 40%;
		}
		.sales{
			color:#888;
			width: 40%;
		}
	}
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-detial {
		font-size: 25rpx;
		color: #C0C4CC;
		margin-top: 35rpx;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 10rpx;
	}
</style>
